<template>
	<div class="new_guest_act">
		<x-header @on-click-back="forward" title="新客立减活动" :left-options="{backText: '',preventGoBack:true}">
			<a slot="right" style="color: #fff;" @click="mustRead">创建必读</a>
		</x-header>
		<div class="content">
			<div class="sel_dates">
				<div class="sel_start_date">
					<group>
						<datetime v-model="value1" placeholder="请设置" title="开始日期" @on-cancel="log1" @on-confirm="onConfirm1"></datetime>
					</group>
				</div>
				<div class="sel_end_date">
					<group>
						<datetime v-model="value2" placeholder="请设置" title="结束日期" @on-cancel="log2" @on-confirm="onConfirm2"></datetime>
					</group>
				</div>
			</div>
			<div class="reduce_fee">
				<group>
					<x-input title="配送费立减" placeholder="请设置" v-model="input1"></x-input>
				</group>
			</div>
			<div class="agreement">
				<p>已阅读并同意<span @click="goProtocol">《商家自营销协议》</span>
					<x-switch title="" v-model="isSwitch"></x-switch>
				</p>
			</div>
		</div>
		<!-- 创建必读阴影 -->
		<div class="mask" v-if="showShadow" @click="showShadow=false">
		</div>
		<div class="mask_contents" v-if="showShadow">
			<div class="mask_content">
				<div class="mask_title">创建必读</div>
				<div class="mask_concept">
					<div>
						<span>●</span>
						<p>此活动针对本店新客进行下单立减，来达到拉新及提升单量的目的</p>
					</div>
					<div>
						<span>●</span>
						<p>单个门店最多支持一个此活动</p>
					</div>
					<div>
						<span>●</span>
						<p>此活动为在线支付专享活动</p>
					</div>
					<div>
						<span>●</span>
						<p>活动开始时间是指当日00:00:00</p>
					</div>
					<div>
						<span>●</span>
						<p>活动结束时间是指当日23:59:59</p>
					</div>
				</div>
			</div>
		</div>
		<footer>
			<x-button v-if="isSwitch" style="background:#02c1af;color:#fff;" @click.native="ensureSave">确认并保存</x-button>
			<x-button v-if="!isSwitch" style="background:#cbd2d8;color:#fff;">确认并保存</x-button>
		</footer>
		<alert v-model="show1" title="提示" @on-show="onShow" @on-hide="onHide">{{ alert_title }}</alert>
	</div>
</template>

<script>
	import { setCookie, getCookie, removeCookie, clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem, Datetime, Group, Alert, XInput, XSwitch, XButton } from 'vux';
	import { getUrlParam }  from '@/assets/js/getUrlParam'
	export default {
		name: 'new_guest_act',
		data() {
			return {
				showShadow: false,
				value1: '', //起始时间
				value2: '', //结束时间
				show1: false,
				alert_title: '',
				input1: '', //配送费立减
				isSwitch: true, //是否同意协议
				flagss: true, //防止重复提交
				params: '',
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			Datetime,
			Group,
			Alert,
			XInput,
			XSwitch,
			XButton
		},
		computed: {

		},
		created() {
			if(getUrlParam('user_product_id')){
	        	setCookie('user_product_id',getUrlParam('user_product_id'))
	        }else{
	        	setCookie('user_product_id','')
	        }
	      	if(getUrlParam('uid')){
	        	setCookie('uid',getUrlParam('uid'))
	        }else{
	        	setCookie('uid','')
	        }
	        if(getUrlParam('token')){
	        	setCookie('token',getUrlParam('token'))
	        }else{
	        	setCookie('token','')
	        }
			this.params = '?user_product_id='+getCookie('user_product_id')+'&uid='+getCookie('uid')+'&token='+getCookie('token');
			
			let dd = new Date();
			this.value1 = this.formats(dd.getTime());
		},
		methods: {
			//返回
			forward() {
				let self = this;
				this.$vux.confirm.show({
					content: '是否退出编辑活动',
					confirmText: '确认',
					onConfirm() {
						self.$router.go(-1);
					}
				})
			},
			//创建必读
			mustRead() {
				this.showShadow = true;
			},
			onConfirm1(val) {
				this.value1 = val;
			},
			log1() {

			},
			onConfirm2(val) {
				if(!this.value1) {
					this.show1 = true;
					this.alert_title = '请先选择开始日期';
					this.value1 = this.value2 = '';
				}
				this.value2 = val;
				//计算相差天数
				let s1 = this.value1;
				let s2 = this.value2;
				s1 = new Date(s1.replace(/-/g, "/"));
				s2 = new Date(s2.replace(/-/g, "/"));
				let days = s2.getTime() - s1.getTime();
				if(days <= 0) {
					this.show1 = true;
					this.alert_title = '结束日期不能小于开始日期';
					this.value2 = '';
				}
			},
			log2() {

			},
			onShow() {

			},
			onHide() {

			},
			//协议
			goProtocol() {
				this.$router.push('/protocol');
			},
			//日期格式化
			formats(val) {
				let y = new Date(val).getFullYear();
				let m = new Date(val).getMonth() + 1 >= 10 ? new Date(val).getMonth() + 1 : '0' + (new Date(val).getMonth() + 1);
				let d = new Date(val).getDate() >= 10 ? new Date(val).getDate() : '0' + new Date(val).getDate();
				return y + "-" + m + "-" + d;
			},
			//确认保存
			ensureSave(){
				if(this.value1 == ''){
					this.$vux.alert.show({
						title: '提示',
						content: '请选择开始日期'
					});
					return;
				}
				if(this.value2 == ''){
					this.$vux.alert.show({
						title: '提示',
						content: '请选择结束日期'
					});
					return;
				}
				if(this.input1 == ''){
					this.$vux.alert.show({
						title: '提示',
						content: '请输入配送费'
					});
					return;
				}
				if(!this.flagss){
					return false;
				}
				let obj = {};
				obj.start_time = new Date(this.value1.replace(/-/g,'/')).getTime();
				obj.end_time = new Date(this.value2.replace(/-/g,'/')).getTime();
				obj.money = +this.input1;
				this.$axiosPost('/coupon/index/newErect' + this.params,obj).then(res => {
					//console.log(res);
					this.flagss = false;
					if(res.code === 200){
						this.$vux.toast.show({
							text: '添加成功',
							position: 'middle'
						})
						setTimeout(() => this.$router.push('/actList/0'), 1500);						
					}
				})
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.new_guest_act {
		.content {
			.sel_dates {
				.sel_start_date {
					margin-top: .28rem;
				}
				.sel_end_date {
					margin-bottom: .28rem;
				}
			}
			.agreement {
				display: flex;
				background: #fff;
				padding: .12rem 0;
				margin-top: .22rem;
				p {
					width: 100%;
					display: flex;
					align-items: center;
					font-size: .28rem;
					color: #2e2e2e;
					padding-left: .28rem;
					span {
						color: #02c1af;
					}
				}
			}
		}
		.mask {
			background: #000;
			opacity: .8;
			z-index: 9999;
			filter: opacity(80%);
			position: fixed;
			top: 0;
			left: 0;
			bottom: 0;
			right: 0;
			margin: auto;
		}
		.mask_contents {
			width: 5.4rem;
			height: 5.4rem;
			background: #fff;
			z-index: 99999;
			position: fixed;
			bottom: 0;
			right: 0;
			top: 0;
			left: 0;
			margin: auto;
			display: flex;
			flex-flow: column;
			.mask_content {
				overflow: auto;
				padding-bottom: .5rem;
			}
			.mask_title {
				width: 4.8rem;
				padding: .5rem 0 .15rem 0;
				font-size: .36rem;
				color: #242424;
				font-weight: 700;
				margin: 0 auto;
				border-bottom: 1px solid #f0f0f0;
			}
			.mask_concept {
				padding-top: .25rem;
				>div {
					width: 4.8rem;
					margin: .2rem auto 0 auto;
					text-align: left;
					font-size: .28rem;
					color: #323232;
					display: flex;
					align-items: center;
					span {
						margin-right: .18rem;
					}
				}
			}
		}
		footer {
			width: 90.1%;
			height: .75rem;
			margin: .98rem auto;
		}
	}
</style>